<template>
  <div>
    <el-card class="box-card" v-show="isCard">
      <button class="close-btn" @click="closeCard">&times;</button>
      <div class="text">
        <div class="left item" v-show="riverStationShow">
          <p>站名: {{ stationInfo.stnm }}</p>
          <p>时间: {{ stationInfo.latestobservetime }}</p>
          <p>水位: {{ stationInfo.smallscalewaterstatus}}米</p>
          <p>比汛限水位: {{ stationInfo.status_difference }}米</p>
        </div>
        <div class="left item" v-show="reservoirStationShow">
          <p>站名: {{ stationInfo.reservoirName}}</p>
          <p>时间: {{ stationInfo.observtime }}</p>
          <p>水位: {{ stationInfo.waterleve}}米</p>
          <p>比汛限水位: {{ stationInfo.status_difference }}米</p>
        </div>
      </div>

      <div class="card-footer">
        <el-button @click="showYearTable" type="primary" icon="el-icon-s-data">查看水位变化过程</el-button>
      </div>
    </el-card>
    
  </div>
</template>

<script>
import timeline from "./timeline.vue";
export default {
  name: "popInfo",
  components: {
    timeline,
  },
  data() {
    return {
      stationInfo:{},
      riverStationShow: true,
      reservoirStationShow:false,
     
      isCard: false,
      dialogYearTableVisible: false,
     
     
      input: '',
    };
  },
  watch:{
    stationInfo(newVal){
      
   if(newVal.type == "河道站"){
      this.riverStationShow = true;
      this.reservoirStationShow = false;
    }else{
      this.riverStationShow = false;
      this.reservoirStationShow = true;
    }
  },
},
  methods: {
    closeCard() {
      this.isCard = false; // 修正: 使用 this 访问 data 属性
    },
    showCard() {
      this.isCard = true; // 显示弹窗
    },
    showYearTable() {
      this.$emit('showYearTable');
    },
   
    updateStationInfo(newInfo) {
      this.stationInfo = newInfo;
      console.log(this.stationInfo, "stationInfo");
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: auto;
}

.el-card /deep/ .el-card__header {
  padding: 0;
  height: 43px;
}

.btn {
  width: 10px;
  height: 10px;
  background-image: url("../../assets/images/header/u68.png");
}
::v-deep .el-card__body, .el-main {
    padding: 0; 
}
/* .btn-1 {
    width: 10px;
    height: 10px;
    background-image: url("../../assets/images/header/u68.png");
  } */

.clearfix {
  width: 100%;
  /* 使 .clearfix 充满父容器的宽度 */
  height: 100%;
  /* 使 .clearfix 充满父容器的高度 */
  background-color: rgb(7, 46, 82);
  font-size: 24px;
  color: #ffffff;
  display: flex;
  /* 使用 flex 布局对齐内容 */
  justify-content: space-between;
  /* 水平对齐内容 */
  align-items: center;
  /* 垂直对齐内容 */
  padding: 0 10px;
  /* 可选：添加一些内边距 */
}

.box-card {
  width: 12vw;
  height: 17vh;
  display:flex;
  justify-content: center;
  background-color: rgba(37, 74, 100, 0.8);
  color:white;
}
.close-btn {
    position: absolute; /* 绝对定位 */
    top: 2%;
    right: 1%;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: white;
}
.close-btn:hover {
    color: #409eff; /* 鼠标悬停时改变颜色 */
}
.card-footer {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.card-footer button {
  margin: 0 10px;
}

.text {
  font-size: 16px;
  display: flex;
  margin-top:0.5rem;
  /* text-align:center; */
  /* border: 1px solid #ddd; */
}

.text .left{
  width: 100%;
 
}

.text .left .item {
  margin: 0;
}

.text .right img {
  width: 100%;
  height: auto;
}

.card-footer button {
  font-size: 16px;
  /* 调整按钮文字大小 */
  margin: 0 10px;
}

/deep/.el-dialog__header {
  height: 27px;
  background-color: rgb(7, 46, 82) !important;
}

/deep/.el-dialog__title {
  color: white !important;
  font-size: 24px;
}

/deep/.el-dialog__close {
  font-size: 24px !important;
  /* 增大关闭按钮字体大小 */
}
.left-table{
  border: #ddd 1px dashed;

}
</style>
